<template>
  <view class="wrap bd" style="position: relative">
    <view class="btd">
      <span class="first"></span>身高 <span class="second"></span>社区平均线
    </view>
    <view class="btd bt1">
      曲线使用世卫组织最新标准
      <text class="quit" @click="tz()">什么是成长曲线？</text>
    </view>
    <view class="qiun-charts">
      <echarts :option="option" style="height: 500px"></echarts>
    </view>
  </view>
</template>

<script>
import echarts from "@/components/echarts/echarts.vue";
export default {
  components: {
    echarts,
  },
  data() {
    return {
      bf: "",
      list: [
        {
          name: "记录列表",
        },
        {
          name: "曲线记录",
        },
      ],
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      windowHeight: 0,
      wList: [],
      option: {},
      charts: {
        categories: [],
        ylbSx: [],
        kjbSx: [],
        bzx: [],
        kjbXx: [],
        ylbXx: [],
        deptAvg: [],
        height: [],
      },
    };
  },
  created() {
    this.getRecord();
  },
  methods: {
    logstatrt() {
      //console.log('初次调用');
      this.option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 10,
            type: "inside", //slider表示有滑动块的，inside表示内置的
          },
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "月龄",
          nameLocation: "end",
          data: this.charts.categories,
          boundaryGap: false,
          axisLabel: {
            //坐标轴刻度标签的相关设置
            interval: 0, //横轴信息全部显
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#efefef",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#939393",
              width: 1, //这里是为了突出显示加上的
            },
          },
          axisLabel: {
            fontSize: 10,
          },
        },
        yAxis: {
          name: "身高(cm)",
          type: "value",
          min: 40,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#efefef",
            },
            interval: 1,
          },
          axisLine: {
            lineStyle: {
              color: "#939393",
              width: 1, //这里是为了突出显示加上的
            },
          },
          axisLabel: {
            fontSize: 10,
          },
        },
        series: [
          {
            name: "97th",
            type: "line",
            data: this.charts.ylbSx,
            symbol: "none",
            lineStyle: {
              type: "dashed",
              width: 1,
            },
            itemStyle: {
              color: "#cbcbcb",
            },
            label: {
              show: true,
              formatter: "97th",
              position: "top",
              distance: 3,
              offset: [3, 0],
            },
          },
          {
            name: "85th",
            type: "line",
            data: this.charts.kjbSx,
            symbol: "none",
            lineStyle: {
              type: "dashed",
              width: 1,
            },
            itemStyle: {
              color: "#cbcbcb",
            },
            label: {
              show: true,
              formatter: "85th",
              position: "top",
              distance: 3,
              offset: [3, 0],
            },
          },
          {
            name: "50th",
            type: "line",
            data: this.charts.bzx,
            symbol: "none",
            lineStyle: {
              type: "dashed",
              width: 1,
            },
            itemStyle: {
              color: "#cbcbcb",
            },
            label: {
              show: true,
              formatter: "50th",
              position: "top",
              distance: 3,
              offset: [3, 0],
            },
          },
          {
            name: "15th",
            type: "line",
            data: this.charts.kjbXx,
            symbol: "none",
            lineStyle: {
              type: "dashed",
              width: 1,
            },
            itemStyle: {
              color: "#cbcbcb",
            },
            label: {
              show: true,
              formatter: "15th",
              position: "top",
              distance: 3,
              offset: [3, 0],
            },
          },
          {
            name: "3th",
            type: "line",
            data: this.charts.ylbXx,
            symbol: "none",
            lineStyle: {
              type: "dashed",
              width: 1,
            },
            itemStyle: {
              color: "#cbcbcb",
            },
            label: {
              show: true,
              formatter: "3th",
              position: "top",
              distance: 3,
              offset: [3, 0],
            },
          },
          {
            name: "社区平均线",
            type: "line",
            data: this.charts.deptAvg,
            symbol: "circle",
            symbolSize: 4,
            connectNulls: true,
            symbol: "none",
            itemStyle: {
              color: "#FF557F",
            },
          },
          {
            name: "身高",
            type: "line",
            data: this.charts.height,
            symbol: "circle",
            symbolSize: 4,
            connectNulls: true,
            itemStyle: {
              color: "#18C7E1",
            },
          },
        ],
      };
    },
    getSysInfo() {
      let self = this;
      uni.getSystemInfo({
        success(res) {
          self.windowHeight = res.windowHeight;
        },
      });
    },
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {},
    getRecord() {
      let self = this;
      let LineA = {
        categories: [],
        series: [],
      };
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config.get("/childrenInfo/childrenHeight", {}).then((res) => {
        uni.hideLoading();
        if (res.data.code === 200) {
          // self.wList = res.data.data||[];
          res.data.data.forEach((it) => {
            self.charts.categories.push(
              it.monthAge == 0 ? "出生" : it.monthAge + "月龄"
            );
            self.charts.ylbSx.push(it.ylbSx);
            self.charts.kjbSx.push(it.kjbSx);
            self.charts.bzx.push(it.bzx);
            self.charts.kjbXx.push(it.kjbXx);
            self.charts.ylbXx.push(it.ylbXx);
            self.charts.deptAvg.push(it.deptAvg == 0 ? null : it.deptAvg);
            self.charts.height.push(it.height == 0 ? null : it.height);
          });
          this.logstatrt();
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    goAddGraph() {
      uni.navigateTo({
        url: "/pages/main/child/backlog/grow-graph2-add",
      });
    },
    tz() {
      uni.navigateTo({
        url: "/pages/main/pub/czqxinfo",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  margin-bottom: 30rpx;
  position: fixed;
  background-color: #fff;
  overflow-x: scroll;
  overflow-y: hidden;
}

.btd {
  position: fixed;
  width: 100%;
  height: 100rpx;
  top: 1000rpx;
  font-size: 22rpx;
  line-height: 100rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  span {
    display: inline-block;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    margin: 10rpx;
  }

  .first {
    background-color: #18c7e1;
  }

  .second {
    background-color: #ff557f;
  }
}

.bt1 {
  top: 1050rpx;
  z-index: 11;

  .quit {
    margin-left: 20rpx;
    color: #007aff;
  }
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #eee;
  padding-top: 1upx;
}

.item {
  margin: 20upx;
  padding: 30upx;
  background-color: #fff;
}

.edit {
  width: 120upx;
  height: 120upx;
  border-radius: 50%;
  background-color: #84e1ef;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 10%;
  bottom: 20%;
}

.qiun-charts {
  position: relative;
  height: 500upx;
}

.tips {
  position: absolute;
  right: 8rpx;
  color: #c9c9c9;
  font-size: 13px;
  bottom: -484rpx;
}

.t1 {
  top: 40rpx;
  right: 100rpx;
}

.t2 {
  top: 100rpx;
  right: 100rpx;
}

.t3 {
  top: 170rpx;
  right: 100rpx;
}

.t4 {
  top: 218rpx;
  right: 100rpx;
}

.t5 {
  top: 256rpx;
  right: 100rpx;
}

.charts {
  height: 1200upx;
}

.qiun {
  // padding-top: 40rpx;
  background-color: #ffffff;
  overflow: scroll;

  .sli {
    padding: 20rpx;

    .le {
      width: 20rpx;
      height: 20rpx;
      display: inline-block;
      border-radius: 50%;
      background-color: #18c7e1;
      margin: 0 20rpx 0 5rpx;
    }
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
}
</style>